{include file="header/index" /}
<meta charset="UTF-8">
	<style>
		.form-control {
			height: 33px;
		}
	</style>

	<body>
		<div class="container  privilegeUserList pb40">
			<h2 class="list-title">菜单列表</h2>
			<div class="addUser">
				<div class="row">
					<div class="col-lg-2 col-md-2 col-sm-3">
						<a href="#" onclick="menuopen()" class="btn btn-default addUser-btn">添加菜单</a>
					</div>
					<!-- /.col-lg-6 -->
				</div>
				<!-- /.row -->
			</div>

			<div class="table-responsive mt40">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>ID</th>
							<th>权限名称</th>
							<th>节点</th>
							<th>菜单状态</th>
							<th>添加时间</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{foreach  $admin_rule as $v}
						<tr>
							<td>{$v.id}</td>
							<td style='text-align:left;padding-left:{if condition="$v.leftpin neq 0"}{$v.leftpin}px{/if}'>{$v.lefthtml}{$v.title}</td>
							<td>{$v.url}</td>
							<td>
								{if condition="$v['status'] eq 1"}
									<div id="zt8" onclick="role_state(this,{$v.id})"><span class="label label-info">开启</span></div> 
								{else /}
									<div id="zt8" onclick="role_state(this,{$v.id})"><span class="label label-danger">关闭</span></div>
								{/if}
								
							</td>
							<td>{:date('Y-m-d H:i:s',$v.add_time)}</td>
							<td><input class="t_center sort-input" type="text" value="{$v.sort}" name="sort" onchange="ModifyTheSort(this,{$v.id})"></td>
							<td>
								<a href="{:url('Menu/ModifyTheSort',array('id'=>$v['id']))}" class="btn btn-primary btn-xs"> <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
								<a href="javascript:;" onclick="roleDel(this,{$v.id})" class="btn btn-danger btn-xs"> <i class="fa fa-trash-o"></i> 删除</a>
							</td>
						</tr>
						{/foreach}
					</tbody>
				</table>
			</div>
			<p class="fr">第1页,共1页</p>
		</div>

		<div class="modal  fade in layui-layer layui-layer-page layui-layer-demo layer-anim addmenu" >
			<div class="modal-dialog ">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" onclick="menuClose()" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
						<h3 class="modal-title">添加菜单</h3>
					</div>
					<form class="form-horizontal" name="add_rule" id="add_rule" method="post" action="">
						<div class="ibox-content">
							<div class="form-group">
								<label class="col-sm-3 control-label">所属父级</label>
								<div class="col-sm-8">
									<select name="pid" class="form-control" onchange="style_display();" id="pid">
										<option value="0">--默认顶级--</option>
										{foreach $admin_rule as $v}
											<option value="{$v.id}" style="margin-left:55px;"> {$v.lefthtml}{$v.title}</option>
										{/foreach}
										
									</select>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">菜单名称</label>
								<div class="col-sm-8">
									<input type="text" name="title" id="title" placeholder="输入菜单名称" class="form-control">
								</div>
							</div>
							
							
							<div class="hr-line-dashed" ></div>
							<div class="form-group" id="style_display">
								<label class="col-sm-3 control-label">CSS样式</label> 
								<div class="col-sm-8">
									<input type="text" name="css" id="css" placeholder="输入CSS样式" class="form-control">
									<a class="fl mt5 mr10 col-127" href="http://fontawesome.dashgame.com/" target="_blank">选择图标</a><span class="help-block m-b-none fl">如：如fa fa-user</span>
								</div>
							</div>
							
							
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">节点</label>
								<div class="col-sm-8"> 
									<input type="text" name="url" id="url" placeholder="模块/控制器/方法" class="form-control">
									<span class="help-block m-b-none">如：administrative/user/index (一级节点添加“#”即可)</span>
								</div>
							</div>
							
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">排&nbsp;序</label>
								<div class="col-sm-8">
									<input type="text" name="sort" id="sort" value="50" placeholder="输入排序" class="form-control">
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label">状&nbsp;态</label>
								<div class="col-sm-6">
										<div class="switchery-radio" style="padding-top: 8px;">
											<input type="checkbox" name="status" value="1" class="js-switch" checked>
											默认开启
										</div>
									</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" onclick="addMenu();"><i class="fa fa-save"></i> 保存</button>
							<button type="button" class="btn btn-danger"  onclick="menuClose()"><i class="fa fa-close"></i> 关闭</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			//删除
			function roleDel(obj,id) {
				layer.alert('确认删除此条记录吗?', {
					btn: ['确认', '取消'], //按钮

				}, function() {
					$.post("{:url('Menu/delMenu')}",{id:id},function(e){
						if(e.code == '1'){
							layer.open({content: e.msg,time: 2000});
							$(obj).parents("tr").remove()
						}else{
							layer.open({content: e.msg,time: 2000});
						}
					},'json');
				});
			}
			//状态开启关闭	
			function role_state(obj,id) {
				$.post("{:url('Menu/edit')}",{id:id},function(e){
					if(e.code == '1'){
						layer.msg(e.msg, {
							icon: 1,
							time: 2000
						});
						if($(obj).find("span").hasClass("label-info")) {
							$(obj).find("span").addClass("label-danger")
							$(obj).find("span").removeClass("label-info");
							$(obj).find("span").text("关闭");
						} else {
							
							$(obj).find("span").removeClass("label-danger")
							$(obj).find("span").addClass("label-info");
							$(obj).find("span").text("开启")
							
						}
					}else{
	        			layer.msg(e.msg,{icon:0,shade:0.1});
	        			return false;
					}
				},'json')
				
				
				
			}
			
			/**
			 * 修改排序
			 */
			function ModifyTheSort(obj,id){
				var sort = $(obj).val();
				var id = id;
				$.post("{:url('Menu/ModifyTheSort')}",{sort:sort,id:id},function(e){
					
				},'json');
			}
			
			
			/**
			 * 添加菜单栏
			 */
			
			function addMenu(){
				var sendData = {};
				var data = $("#add_rule").serialize(); //序列化表单
			
				data.split('&').forEach(function(param){
				  param = param.split('=');
				  sendData[param[0]]   = decodeURI(param[1]);
				})
				if($("#title").val() == ''){
					layer.msg('菜单名不能为空', {icon: 2,time: 2000});
					return false;
				} 
				
				if($("#url").val() == ''){
					layer.msg('节点不能为空', {icon: 2,time: 2000});
					return false;
				}
				$.post("{:url('Menu/addMenu')}",{sendData},function(e){
					
					if(e.code == 0){
	        			layer.msg(e.msg,{icon:0,shade:0.1});
	        			return false;
	        		}
					
					if(e.code == '1'){
						layer.msg(e.msg, {icon: 1,time: 2000},function(){window.location.href=e.data;});
					}else{
						layer.msg(e.msg, {icon: 2,time: 2000});
					}
				},'json')				
			}
			
			
			/* 
			$("#add_rule").submit(function(){
				if($("#title").val() == ''){
					layer.msg('菜单名不能为空', {icon: 2,time: 2000});
					return false;
				} 
				
				if($("#url").val() == ''){
					layer.msg('节点不能为空', {icon: 2,time: 2000});
					return false;
				}
				
			}) */
			
			
			
			/**
			 * CSS 样式展示，隐藏
			 **/
			function style_display(){
				var pid = $("#pid option:selected").val();
				if(pid != 0){
					$("#style_display").hide();
				}else{
					$("#style_display").show();
				}
			}
			
			
			
			
			
			
			
			
			
			
			//开启添加菜单
			function menuopen(){
				$(".addmenu").show()
			}
			//关闭添加菜单
			function menuClose(){
				$(".addmenu").hide()
			}
		</script>
	</body>

</html>